<template>
  <webview ref="webviewRef" class="webview-container" :src="url" :useragent="userAgent" plugins nodeintegration
    allowpopups @dom-ready="handleDomReady" @new-window="handleNewWindow" @did-start-loading="handleStartLoading"
    @did-navigate="handleNavigate" @did-navigate-in-page="handleNavigateInPage" />
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'

// Props
const props = defineProps({
  url: {
    type: String,
    required: true
  },
  userAgent: {
    type: String,
    required: true
  }
})

// Emits
const emit = defineEmits([
  'navigation-state-changed',
  'dom-ready',
  'new-window'
])

// Refs
const webviewRef = ref()

// 导航状态
const canGoBack = ref(false)
const canGoForward = ref(false)

// 更新导航状态
function updateNavigationState() {
  const webview = webviewRef.value
  if (webview) {
    canGoBack.value = webview.canGoBack()
    canGoForward.value = webview.canGoForward()
    emit('navigation-state-changed', {
      canGoBack: canGoBack.value,
      canGoForward: canGoForward.value
    })
  }
}

// 事件处理
function handleDomReady() {
  const webview = webviewRef.value
  if (webview) {
    // 获取当前URL并发送给父组件
    const currentUrl = webview.getURL()
    if (!currentUrl) return;
    emit('dom-ready', { url: currentUrl, webview })
  }
  updateNavigationState()
}

function handleNewWindow(e) {
  e.preventDefault()
  const webview = webviewRef.value
  if (webview) {
    webview.loadURL(e.url)
  }
  emit('new-window', e)
}

function handleStartLoading() {
  updateNavigationState()
}

function handleNavigate() {
  updateNavigationState()
}

function handleNavigateInPage() {
  updateNavigationState()
}

// 暴露方法给父组件
function goBack() {
  const webview = webviewRef.value
  if (webview && canGoBack.value) {
    webview.goBack()
  }
}

function goForward() {
  const webview = webviewRef.value
  if (webview && canGoForward.value) {
    webview.goForward()
  }
}

function reload() {
  const webview = webviewRef.value
  if (webview) {
    webview.reload()
  }
}

function loadURL(url) {
  const webview = webviewRef.value
  if (webview) {
    webview.loadURL(url)
  }
}

function setZoomFactor(factor) {
  const webview = webviewRef.value
  if (webview) {
    webview.setZoomFactor(factor)
  }
}

function insertCSS(css) {
  const webview = webviewRef.value
  if (webview) {
    return webview.insertCSS(css)
  }
}

function removeInsertedCSS(key) {
  const webview = webviewRef.value
  if (webview) {
    return webview.removeInsertedCSS(key)
  }
}

function executeJavaScript(code) {
  const webview = webviewRef.value
  if (webview) {
    return webview.executeJavaScript(code)
  }
}

function getWebContents() {
  const webview = webviewRef.value
  if (webview) {
    return webview.getWebContents()
  }
}

// 监听URL变化
watch(() => props.url, (newUrl) => {
  if (newUrl) {
    loadURL(newUrl)
  }
})

// 暴露方法
defineExpose({
  goBack,
  goForward,
  reload,
  loadURL,
  setZoomFactor,
  insertCSS,
  removeInsertedCSS,
  executeJavaScript,
  getWebContents,
  canGoBack,
  canGoForward
})
</script>

<style scoped>
.webview-container {
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
}
</style>